import Taro, { Component } from '@tarojs/taro'
import { Video, View, Swiper, SwiperItem } from '@tarojs/components'
import { FyImg } from "@/components/index"
import styles from './index.module.scss'
import lodash from "@/utils/lodash";
import QualitySecurity from "@/assets/images/quality-security.png";

interface IProps {
  //  商品信息
  goods: any
}

/**
 * 商品详情轮播图
 */
export default class GoodsCarouselTwo extends Component<IProps, {}> {
  props: any
  state: any

  constructor () {
    super(...arguments)
    this.state = {
      current: 0,
    }
  }

  //  current 改变时会触发 change 事件，event.detail = {current, source}
  onChange(e) {
    const { current } = e.detail
    this.setState({
      current
    })
  }

  render() {
    const { current } = this.state
    const { goods = {} } = this.props
    // const { images = [], videoCoverImg = '' } = goods
    const { images = [], video = '', videoCoverImg = '' } = goods

    // const video = 'https://cdn2.wemiaow.com/14_bf1a46e7-e775-4ddb-a9d6-f0ab253a08231.jpg'
    // const videoCoverImg = 'https://cdn2.wemiaow.com/14_bf1a46e7-e775-4ddb-a9d6-f0ab253a08231.jpg'

    const showVideo = video && videoCoverImg
    return images.length ? (
      <View className={styles.wrap}>
        <Swiper
          autoplay
          indicatorDots
          indicatorColor='#fff'
          indicatorActiveColor='#fff'
          // circular
          className={styles.swiper}
          // onChange={this.onChange.bind(this)}
        >
          {showVideo ? <SwiperItem className={styles.swiperItem}>
            <Video src={video} poster={videoCoverImg} />
          </SwiperItem> : null}
          {
            images.map((img, k) => {
              return (
                <SwiperItem className={styles.swiperItem}>
                  <FyImg src={img}/>
                  {k === 0 && <View className={styles.qualityImg}>
                    <FyImg src={QualitySecurity} />
                  </View>}
                </SwiperItem>
              )
            })
          }
        </Swiper>

        {/*<View className={styles.dot}>*/}
        {/*  {*/}
        {/*    images.map((_i, key) => {*/}
        {/*      return (*/}
        {/*        <View key={key} className={`${styles.dotItem} ${current === key ? styles.dotActive : ''}`} />*/}
        {/*      )*/}
        {/*    })*/}
        {/*  }*/}
        {/*  {showVideo ? <View className={`${styles.dotItem} ${current === images.length ? styles.dotActive : ''}`} /> : null}*/}
        {/*</View>*/}
      </View>
    ) : null
  }
}
